<script setup>
import { reactive, toRefs, watch } from "vue";

const emits = defineEmits([
  // 当组件 v-model的内容变化时 触发该事件
  "update:model-value"
]);
const props = defineProps({
  searchFormConfig: {
    type: Array
  },
  modelValue: {
    type: Object,
    required: true
  }
});
const formData = reactive(toRefs(props.modelValue));

watch(
  formData,
  newValue => {
    emits("update:model-value", newValue);
  },
  { deep: true }
);
</script>

<template>
  <a-card>
    <slot name="header"></slot>
    <a-form>
      <a-row :gutter="[16, 8]">
        <template v-for="formItem in searchFormConfig">
          <a-col :span="formItem.colSpan" v-bind="formItem.layout">
            <a-form-item :label="formItem.label" :rules="formItem.rules">
              <template v-if="formItem.type === 'input'">
                <a-input :placeholder="formItem.placeholder" v-model:value.trim="formData[formItem.field]"></a-input>
              </template>
              <template v-else-if="formItem.type === 'password'">
                <a-input-password :placeholder="formItem.placeholder" v-model:value.trim="formData[formItem.field]"></a-input-password>
              </template>
              <template v-else-if="formItem.type === 'select'" :rules="formItem.rules">
                <a-select :options="formItem.options" v-model:value="formData[formItem.field]"></a-select>
              </template>
              <template v-else-if="formItem.type === 'datepicker'" :rules="formItem.rules">
                <a-range-picker v-model:value="formData[formItem.field]" />
              </template>
            </a-form-item>
          </a-col>
        </template>
        <slot name="footer"></slot>
      </a-row>
    </a-form>
  </a-card>
</template>

<style scoped>
.ant-row,
.ant-form-item {
  margin: 0 auto;
}
</style>
